Q. DOM 실습 좀더 하고싶을땐?

Prep 과제로 충분하지만 더 하고싶다면,

인터넷에 javascript mini project 검색.

아니면, 스스로 아이디어를 내서 만들어보자.

querySelector vs getElementById

DOM에있는 요소를 선택하는 여러 방법들 중에서 (querySelector, getElementById, getElementsByClassName…) 어느것이 더 효율적일까?

결론은 본인이 쓰기에 편한걸로.

켄님은 querySelector 추천. (범용적으로 사용가능한 것 같음)

기능적인 차이는 95%가 같으나 5%정도 미세하게 다른데, 아직 이 차이에 대해서 깊은 관심은 없어도 된다.

하지만, 사용에 있어서 일관성이 있으면 좋겠다. querySelector만 쓰거나… getElementById와 같은 것들만 쓰거나…

querySelector와 getElementById의 5%가 다른 차이점은 한번 찾아보자.

과제 게임 재시작시에 생길 수 있는 버그? restart button?

start Button이나 restart Button 눌렀을 때 작동이 2번, 혹은 그 이상 되는 경우?

이 부분은 addEventListener, removeEventListener와 관련이 있다.

이벤트 실행구문이나 로직중에서 만약, addEventListener가 있다면 removeEventListener도 같이 이루어져야 된다.

로직에 의해서 addEventListener로 여러번 등록되면 여러번 등록된 만큼 실행이 된다.

function doSomething() {
  startButton.addEventListener("click", function() {
  // ToDo...
	});
}

doSomething(); // 이벤트 한번 등록
doSomething(); // 이벤트 두번 등록
// 따라서 startButton click시에 위 event 함수가 2번 실행된다.

그래서 한번만 addEventListener가 이루어지도록 하거나, 로직상에 addEventListener가 반복된다면 removeEventListener도 동시에 이루어져야 된다.

그래서 추후에 이벤트함수가 여러번 실행되는 것 같다면 addEventListener가 여러번 이루어지고 있지는 않은지 확인을 해보자.

function doSomething() {
  function startBtnClickHandler() {
    // ToDo...
  }
  startButton.addEventListener("click", startBtnClickHandler);
  // 이렇게 해도 똑같다.
  // doSomething함수가 실행될때마다 startBtnClickHandler가 함수선언(생성)되고 등록되기 때문. replace되지 않는다.
}

doSomething();
doSomething();

하지만, 한 요소의 같은 이벤트에 여러개의 함수를 등록하는 것 보다 하나의 이벤트 함수에 다른 함수들을 사용하도록 하는것이 훨씬 바람직하다.(어쩔 수 없는 상황 제외)

여러번 등록하게 된다면, 브라우저에 일이 추가가 되는 개념(이벤트 대기, 감지)이라 브라우저 효율이나 성능이 떨어질 수 있다.

Q. 이벤트 추가 말고도 브라우저에 부담을 주는 것들?

브라우저가 해야하는 일이 많아지면 부담이 늘어난다고 보면 된다.

  • 이벤트 추가
  • DOM 조작
  • setTimeout, setInterval 함수
  • 등등…

Q. innerHTML과 textContent 차이?

두가지의 기능이 완전 다르다.

innerHTML은 element의 내부 html을 설정, 변경하는 것!

someElement.innerHTML = "<img src='...' alt=''/>"

와 같이 HTML을 수정할 수 있다.

이전에 someElement 내부에 들어있던 기존 html 값들은 다 없어진다.

textContent는 element의 text값만 설정, 변경하는 것!

innerText VS textContent

innerText보다는 textContent가 더 권장된다.

왜 권장되는지는 찾아보자.

innerHTML과 createElement - appendChild 다른점?

innerHTML은 우리가 HTML 파일을 생성(Marup)할때처럼 문자열처럼 값을 넣을 수 있다면,

createElement - appendChild는 각 요소를 프로그래밍적으로 만들어서 넣는다고 보면된다.

상황에 맞게 쓰면 된다. 후자는 요소를 여러개 추가해야되는 상황이면 일일이 만들어서 넣어줘야 된다.

둘 다 상황에 맞게 잘 쓰면 된다.